<template>
  <el-dialog title="批次关闭" :visible.sync="showDialog" top="0" :close-on-click-modal="false" @close="cancel">
    <el-form v-if="detail !== null" ref="form" label-position="left" :model="formData" :rules="rules" class="el-form">
      <el-form-item label="批次名称：" class="w100p">
        <el-input v-model="detail.batchName" disabled />
      </el-form-item>
      <el-form-item label="批次号：" class="w100p">
        <el-input v-model="detail.batchNo" disabled />
      </el-form-item>
      <el-form-item label="批次关闭时间：" class="w100p">
        <el-input v-model="formData.closeEndTime" disabled />
      </el-form-item>
      <el-form-item label="实际加工量：" class="w100p">
        <el-input v-model="detail.actualVolume" disabled>
          <template slot="append">{{ detail.unitName }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="产品报废量：" class="w100p">
        <el-input v-model="detail.scrapNum" disabled>
          <template slot="append">{{ detail.unitName }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="实际附属品量：" class="w100p">
        <div class="material-list">
          <div v-for="(item, index) in detail.batchAccessoryList" :key="index" class="list-item">
            <el-input v-model="item.materialName" disabled />
            <el-input v-model="item.num" disabled>
              <template slot="append">{{ item.unitName }}</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="剩余原料量：" class="w100p">
        <div class="material-list">
          <div v-for="(item, index) in detail.batchRawMaterialList" :key="index" class="list-item">
            <el-input v-model="item.materialName" disabled />
            <el-input v-model="item.surplusNum" disabled>
              <template slot="append">{{ item.unitName }}</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="关闭原因：" prop="closeReason" class="w100p">
        <el-input v-model="formData.closeReason" type="textarea" placeholder="请输入关闭原因" clearable />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      <el-button :loading="saveLoading" type="primary" class="savebtn" @click="save()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import api from '@/api/processing-management/process-batch-manage/process-batch-creation/index';
export default {
  components: {},
  props: {
    value: Boolean,
    selectedItem: {
      type: Object,
      default: null
    },
    productList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      formDataDefault: {
        closeEndTime: '',
        closeReason: ''
      },
      formData: {},
      saveLoading: false,
      showDialog: false,
      rules: {
        closeReason: [
          {
            required: true,
            message: '请输入关闭原因'
          }
        ]
      },
      detail: null
    };
  },
  watch: {
    value(v) {
      this.showDialog = v;
      if (v) {
        this.init();
      }
    }
  },
  created() {
    this.reset();
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = JSON.parse(JSON.stringify(this.formDataDefault));
    },
    getDetail() {
      const { selectedItem } = this;
      api.queryNumByBatchId({ batchId: selectedItem.batchId, statusEnum: 'COMPLETED' }).then(res => {
        if (res.code === 1) {
          this.detail = res.data;
        }
      });
    },
    init() {
      const { selectedItem } = this;
      if (selectedItem) {
        const nowTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
        this.formData.closeEndTime = nowTime;
        this.getDetail();
      }
    },
    save() {
      const { formData, selectedItem, detail } = this;
      const paylod = { ...detail, ...JSON.parse(JSON.stringify(formData)) };
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          if (selectedItem) {
            this.$confirm('是否确认关闭批次？', '提示', {
              distinguishCancelAndClose: true,
              confirmButtonClass: 'btnFalses',
              confirmButtonText: '确认',
              cancelButtonText: '取消'
            })
              .then(() => {
                api
                  .closeBatch(paylod)
                  .then(res => {
                    if (res.code === 1) {
                      this.$message.success(res.msg);
                      this.close();
                      this.$emit('reflash');
                    }
                  })
                  .finally(_ => {
                    this.saveLoading = false;
                  });
              })
              .catch(_ => {
                this.saveLoading = false;
              });
          }
        }
      });
    },
    close() {
      setTimeout(() => {
        this.reset();
        this.$refs['form'].resetFields();
      }, 250);
      this.$emit('input', false);
    },
    cancel() {
      setTimeout(() => {
        this.reset();
        this.$refs['form'].resetFields();
      }, 250);
      this.$emit('input', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  > * {
    &:first-of-type {
      flex: 0 0 70%;
    }
  }
}
::v-deep .el-form-item__label {
  min-width: 180px !important;
}
.material-list {
  width: 100%;
  .list-item {
    display: flex;
    margin-bottom: 5px;
    &:last-of-type {
      margin-bottom: 0;
    }
    > * {
      &:first-of-type {
        flex: 0 0 60%;
        margin-right: 5px;
      }
    }
  }
}
</style>
